<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">

        <el-form-item label="单据号">
            <el-input v-model="formData.no" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="单号" width="180"/>
        <el-table-column fixed prop="poId" label="采购单号" width="180"/>
        <el-table-column prop="statusX" label="状态" width="100">
            <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusX }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="brief" label="备注" width="100"/>
        <el-table-column prop="lastUpdateBy" label="最近更新人" width="120"/>
        <el-table-column prop="lastUpdateTime" label="最近更新时间" width="140" :formatter="formatter"/>
        <el-table-column fixed="right" label="操作" width="270">
            <template #default="scope">
                <el-button type="default" size="small" @click="showItemsClick(scope.row)">
                    明细
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
                   @current-change="currentChange"/>

    <el-drawer v-model="drawer" direction="ltr" size="60%">
        <el-table :data="tableData2" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="80" />
            <el-table-column fixed prop="productId" label="商品id" width="80" />
            <el-table-column fixed prop="productName" label="商品名称" width="200" />
            <el-table-column prop="qty" label="收货量" width="80" />
            <el-table-column prop="brief" label="备注" width="200" />
        </el-table>
        <el-divider/>
    </el-drawer>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import dayjs from "dayjs";
import {ioApi, poApi} from '@/api'

const drawer = ref(false)
const tableData: any = ref([])
const tableData2: any = ref([])
const pageData = reactive({
    total: 0,
    pageSize: 5,
    pageNum: 1
})
const formData = reactive({
    no: ''
})

const currentChange = (num: number) => {
    pageData.pageNum = num
    callIoApi()
}
onMounted(() => {
    callIoApi()
})

const callIoApi = () => {
    let no = formData.no === '' ? undefined : formData.no
    ioApi.select.call({
        no: no,
        pageSize: pageData.pageSize,
        pageNum: pageData.pageNum
    }).then((res: any) => {
        tableData.value = res.items
        pageData.total = res.total
    })
}

const formatter = (row: any, column: any, cellValue: any, index: any) => {
    if (column.property === "lastUpdateTime") {
        return dayjs(cellValue).format('YY/MM/DD HH:mm')
    }
}

const onSubmit = () => {
    pageData.total = 0
    callIoApi()
}

const showItemsClick = (row: any) => {
    drawer.value = true
    ioApi.select_items.call({ioId: row.id}).then((res: any) => {
        tableData2.value = res
    })
}

const getStatusType = (status: number) => {
    let type = "info"
    switch (status) {
        case 1:
            type = "success"
            break;

    }
    return type
}
</script>